<!--
 * @Date: 2022-06-30 15:52:48
 * @LastEditTime: 2022-07-13 23:54:08
-->
<template>
  <div id="rd-main" v-loading="videos.length===0">
    <h1 id="rd-top">排行榜</h1>
    <el-radio-group v-model="rank_select" size="small" class="rd-rank-button" @change="initVideos()">
      <el-radio-button :label="index" v-for="(value, index) in label" :key="value">{{value}}</el-radio-button>
    </el-radio-group>
    <div id="rd-rank-main">
      <RankComponent :videoDetail="value" v-for="value in videos" :key="value.id" class="rd-rank-item" />
    </div>
    <div id="rd-rank-more" @click="getVideos">----点击加载更多----</div>
  </div>
</template>

<script>
import { getMostHotMovieList, getBestMovieList } from '@/api/movie'
import RankComponent from '@/components/display/rank/RankComponent.vue'
export default {
  name: 'RankDisplay',
  components: {
    RankComponent
  },
  data: () => {
    return {
      videos: [],
      rank_select: 0,
      page: 1,
      label: [
        '最多人想看',
        'sublime评价最高'
      ]
    }
  },
  methods: {
    loadMostHotMovieList: function (pageNum) {
      getMostHotMovieList(pageNum)
        .then(res => {
          if (res.data.state === 200) {
            for (let i = 0; i < res.data.data.length; i++) {
              this.videos.push(res.data.data[i])
            }
            // console.log(res)
          } else {
            this.$message({
              message: res.data.message,
              type: 'error'
            })
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    loadBestMovieList: function (pageNum) {
      getBestMovieList(pageNum)
        .then(res => {
          if (res.data.state === 200) {
            for (let i = 0; i < res.data.data.length; i++) {
              this.videos.push(res.data.data[i])
            }
            // console.log(res)
          } else {
            this.$message({
              message: res.data.message,
              type: 'error'
            })
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    getVideos: function () {
      switch (this.rank_select) {
        case 0:
          this.loadMostHotMovieList(this.page)
          break
        case 1:
          this.loadBestMovieList(this.page)
          break
      }
      this.page = this.page + 1
    },
    initVideos: function () {
      this.page = 1
      this.videos = null
      this.videos = []
      this.getVideos()
    }
  },
  // created: function () {
  //   this.getVideos()
  // },
  mounted: function () {
    this.initVideos()
  }
}
</script>

<style>
#rd-main {
  width: 100%;
  height: 100%;
  padding-top: 10px;
}
#rd-top {
  margin-bottom: 10px;
}
.rd-rank-item + .rd-rank-item {
  margin-top: 10px;
  border-top: 1px solid #999;
  padding-top: 10px;
}
.rd-rank-button {
  margin-bottom: 10px;
}
#rd-rank-more {
  margin-top: 10px;
  border-top: 1px solid #999;
  padding-top: 10px;
  color: blue;
  width: 100%;
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
  cursor: pointer;
}
</style>
